<!DOCTYPE html>
<html xmlns:th="http://www.springframework.org/schema/data/jaxb">
<head>
    <meta charset="utf-8">
    <title>代码生成测试表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/components/layuiadmin/layui/src/css/layui.css" media="all">
    <link rel="stylesheet" href="/components/layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="/manage/css/base-search.css" media="all">
    <script src="/manage/js/app.js"></script>
</head>
<body>
<style>
    .layui-inline{
        width: 260px;
    }

    /* 设置数据表格行高 */
    .layui-table-cell {
        height: 20px;
        line-height: 20px;
    }
</style>


<!-- 搜索 -->
<div class="searchTable layui-form">
    <div class="layui-inline">
        <label class="layui-form-label">名称 :</label>
        <div class="layui-input-block">
            <input type="text" id="name" name="name" placeholder="请输入名称 ..." autocomplete="off" class="layui-input">
        </div>
    </div>

    <!-- <button class="layui-btn layui-btn-normal layui-btn-sm" data-type="reload">搜索</button>-->
    <div class="layui-inline">
        <button class="layui-btn layui-btn-normal layui-btn-sm" data-type="reload" style="margin-bottom: 8px">
            <i class="layui-icon layui-icon-search  layuiadmin-button-btn"></i>
        </button>
    </div>
</div>
<!-- 表格 -->
<table class="auth-table" id="auth-table" lay-filter="auth-table"></table>
<!-- 分页插件 -->
<div class="page-table" id="page-table"></div>
<!-- 多删除-添加  -->
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
    </div>
</script>
<!-- 每一行的数据修改或删除  -->
<script type="text/html" id="barDemo">
    <a class="layui-btn  layui-btn-warm layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


<script>

    // 接口
    var gcTestUrl = path + "/admin/test/gcTest";
    var gcTestListUrl = path + "/admin/test/gcTest/list";

    // 路由
    let gcTestPageAdd =  "/page/manage_test_gcTest_gcTestAdd";   //添加弹出
    let gcTestPageUpd =  "/page/manage_test_gcTest_gcTestUpd";   //编辑弹出


    let res;       // 完整的后台数据
    var data;      // 当前行数据（弹出层时可直接parent.data获取）
    layui.use(['form','table', 'laypage'], function () {
        gcTestInit();               //  6、初始化
        gcTestRenderTable();        //  1、数据表格 - 获取表格
        gcTestLayPage();            //  2、分页插件
        gcTestEventToolbar();       //  3、工具栏事件（多删除/添加）
        gcTestEventTool();          //  4、监听数据表格内按钮操作（编辑,删除等）
        gcTestEventSearch();        //  5、监听条件搜索

    });


    /**
     * 1、重载表格和加载表格
     * <p>
     *   getPage() -->  获取 layui 当前分页参数 ===> 如：?current=1&size=10
     *   res -->        后台返回的整个数据，整个页面可获取使用
     * </p>
     */
    function gcTestRenderTable() {
        res = Ajax.get(gcTestListUrl + getPage() + gcTestSearchParam());
        layui.table.render({
            elem: '#auth-table'
            , data: res.data.records
            , toolbar: '#toolbarDemo'
            , limit: res.data.size //显示的数量
            , title: '代码生成测试表'
            , cols: [
                [
                    // {type: 'checkbox', fixed: 'left'}   //fixed: 'right', , fixed: 'left'
                     
                    {field: 'name', title: '名称 '},
                    {field: 'age', title: '年龄 '},
                    {field: 'sex', title: '性别 '},
                    {field: 'like', title: '爱好 '},
                    {field: 'city', title: '城市 '},
                    {field: 'disable', title: '禁用 '},
                    {field: 'headUrl', title: '头像 '},
                    {field: 'time', title: '时间'},
                    {field: 'text', title: '更多信息'}
                    , {title: '操作', toolbar: '#barDemo', width: 250}
                ]
            ]
        });
    }


    /**
     * 2、分页配置, 数据总数会在下一次点击事更新上一次数据库的总数量
     * <p>
     *  1、page-table      -->  注意，这里的 page-table 是 ID，不用加 # 号
     *  2、res.data.total  -->  数据总数，从服务端得到
     *  3、res.data.size   -->  每页数量
     * </p>
     * @param
     */
    function gcTestLayPage() {
        layui.laypage.render({
            elem: 'page-table'
            , count: res.data.total
            , limit: res.data.size
            , layout: pageJson.layout
            , curr: pageJson.curr
            , limits: pageJson.limits
            , groups: pageJson.groups
            , prev: pageJson.prev
            , next: pageJson.next
            , jump: function (obj, first) {
                // 监听分页按钮执行
                // obj.curr  = 当前页
                // obj.limit = 每页显示条数
                // 首次不执行,第一次加载时 first=true (非点击分页按钮)
                if (first) {
                    return;
                }
                // 点击分页按钮刷新表格
                gcTestRenderTable();
            }
        });
    }


    /**
     * 3、监听工具栏按钮事件  toolbar(auth-table) 中 toolbar 为监听表格头按钮事件,auth-table 为数据表格中的elem值
     * <p>
     *  1、obj.event === "add"   -->  添加
     * </p>
     */
    function gcTestEventToolbar() {
        layui.table.on('toolbar(auth-table)', function (obj) {
            if (obj.event === "add") {
                Pop.tipsWindown(gcTestPageAdd, "1024px", "768px", "添加");
            }
        });
    }


    /**
     * 4、监听数据表格内按钮,  tool(auth-table) 中tool为监听表格内按钮事件,auth-table 为数据表格中的elem值
     * <p>
     *  1、obj.event === 'edit'   -->  编辑
     *  2、obj.event === 'del'    -->  删除
     * </p>
     */
    function gcTestEventTool() {
        layui.table.on('tool(auth-table)', function (obj) {
            // 当前行数据
            data = obj.data;
            if (obj.event === 'edit') {
                Pop.tipsWindown(gcTestPageUpd, "1024px", "768px", "修改");
            }
            if (obj.event === 'del') {
                Pop.tipsDeleteId(gcTestUrl + "/" + data.id, obj);
            }
        });
    }


    /**
     * 5.1、条件搜索，重载数据
     * <p>
     *  1、搜索后重置到第一页
     *  2、重载-数据表格
     *  3、重载后-刷新分页数据
     * </p>
     */
    function gcTestEventSearch() {
        let $ = layui.$, active = {
            reload: function () {
                $(".layui-laypage-skip .layui-input").val(1);
                gcTestRenderTable();
                gcTestLayPage();
            }
        };
        $('.searchTable .layui-btn').on('click', function () {
            let type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    }


    /**
     * 5.2、条件搜索的搜索参数
     * <p>
     *  1、加载/重载数据表格-获取查询参数
     *  2、切换页数时-获取查询参数
     *  3、搜索时-获取查询参数
     * </p>
     */
    function gcTestSearchParam() {
            let params = "";
            params += "&name=" + $("#name").val();

            return params;
    }


   /**
    * 6、初始化页面相关数据
    */
    function gcTestInit(){
        
        // 刷新,否则select可能不生效
        layui.form.render();
    }

</script>
</body>
</html>
